<template>
  <div class="button-goup">
        <el-button @click="getMethod($event)">GET请求(不携带参数)</el-button>
        <el-button type="primary" @click="getMethodWithQuery($event)">GET请求(携带query参数)</el-button>
        <el-button type="success" @click="getMethodWithParam($event)">GET请求(携带param参数)</el-button>
        <el-button type="info" @click="postMethodWithBody($event)">POST请求(携带body参数JSON编码)</el-button>
         <el-button type="info" @click="postMethodWithUrlEncode($event)">POST请求(携带body参数URLENCODE编码)</el-button>
         <el-button type="info" @click="postMethodWithBodyCompate($event)">POST请求(携带body参数完整写法)</el-button>
        <el-button type="warning" @click="putMethodWithBody($event)">PUT请求携带body参数</el-button>
        <el-button type="danger" @click="deleteMethodWithParam($event)">DELETE请求携带param参数</el-button>
  </div>
</template>

<script>
import axios from 'axios';

//请求拦截器
//config对象就是分装请求的所有的配置信息,包含请求的URL，请求的参数，header等
axios.interceptors.request.use((config)=>{
   console.log("获取到请求的所有的配置信息",config)
   config.baseURL="http://localhost:3000";
   return config;
})
//响应拦截器
axios.interceptors.response.use(
    //响应成功的回调
    (response)=>{
        console.log("获取到响应成功的数据",response)
        return response.data;
    },
    //响应失败的回调
    (error)=>{
        console.log("获取到响应失败的提示",error)
        //return new Promise(); 此时就不再需要try...actch...
        return Promise.reject(error)  //返回promise失败的实例，才是真正的失败，不能返回error，返回error也视为成功
    }
)

export default {
    data(){
        return {

        }
    },
    methods:{

        async getMethod(){
        //     console.log(axios);
        //     //get请求的简写方式
        //     let result = await axios.get("http://localhost:3000/posts")
        //     console.log(result)
        // }
        
        //完整写法
        try{
            let result =  await axios({
                url:"/posts",
                method:'GET'
            })
            console.log(result)
        }catch(error){
            console.log("请求异常，异常信息，",error)
        }
        },
        //get请求携带query参数,注意query参数参数对象的key应该写为params
        async getMethodWithQuery(){
            //let result = await axios.get('/posts?id=1') //直接拼接在路径上
            let result = await axios.get('/posts',{params:{  //通过query参数指定，如果参数过多可以使用这种方式
                id:1
            }});
            console.log(result)
          },
       
        //get请求携带param参数
        async getMethodWithParam(){
            let result = await axios.get('/posts/1')
            console.log(result)
          },
        
        //get请求携带query参数的完整写法
        async getMethodWithQueryCompate(){
            let response =await axios({
                url:'/posts',
                method:'GET',
                params:{
                    id:1
                }
            })
            console.log(response);
        },
        //get请求携带param参数的完整写法
        async getMethodWithParamCompate(){
            let response =await axios({
                url:'/posts/1',
                method:'GET',
            })
            console.log(response);
        },
        /**
         * post方式可以携带两种编码的参数，1.jsonstring，2.urlEncode
         */
        //post请求携带body参数,{"id": "3", "title": "维基百科", "views": 300}对象会被直接转化为jsonstring，底层执行了JSON.stringify
        async postMethodWithBody(){
           let result = await axios.post('/posts',{"id": "3", "title": "维基百科", "views": 300})
           console.log(result)
        },
        //完整写法
         async postMethodWithBodyCompate(){
           let result = await axios({
            url:'/posts',method:'POST',data:{"id": "4", "title": "百度百科", "views": 100}
           })
           console.log(result)
        },
        //post请求携带urlEncode编码的参数 服务器不一定能处理
         async postMethodWithUrlEncode(){
           let result = await axios.post('/posts','id=6&title=自然科学&views=500')
           console.log(result)
        },


         //put请求携带urlEncode编码的参数 服务器不一定能处理
         async putMethodWithBody(){
           let result = await axios.put('/posts/5',{"id": "5", "title": "百度百科666", "views": 100})
           console.log(result)
        },
        async putMethodWithBodyCompate(){
           let result = await axios({
            url:'/posts/5',
            data:{"id": "5", "title": "百度百科888", "views": 100}
           })
           console.log(result)
        },
        //删除数据
        async deleteMethodWithParam(){
            let result = await axios.delete('/posts/5')
            console.log(result)
        }
        },

        
}
</script>

<style>

</style>